<template>
    <div class="container">
        <div class="btns">
            <el-button @click="back">返回</el-button>
            <el-button type="primary" @click="finish">{{ isAdd ? '创建' : '保存' }}</el-button>
        </div>
        <div class="edit_content">
            <div class="item">
                <span class="item-title">
                    <span style="color:red">*</span>
                    标题：</span
                >
                <el-input placeholder="请输入标题" v-model="title" maxlength="50" style="width:400px"> </el-input>
            </div>
            <span class="desc">50个字符以内。</span>

            <div class="item">
                <span class="item-title">
                    <span style="color:red">*</span>
                    Banner图片：</span
                >
                <el-upload
                    class="elUp"
                    ref="elUp"
                    action="#"
                    list-type="picture-card"
                    :auto-upload="false"
                    :file-list="fileList"
                    :limit="1"
                    :on-change="onchange"
                    :on-exceed="onExceed"
                >
                    <i slot="default" class="el-icon-plus"></i>
                    <div slot="file" slot-scope="{ file }">
                        <el-image
                            class="el-upload-list__item-thumbnail"
                            style="width:80px;height:80px"
                            :src="file.url"
                            fit="scale-down"
                        ></el-image>
                        <span class="el-upload-list__item-actions">
                            <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
                                <i class="el-icon-zoom-in"></i>
                            </span>
                            <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file)">
                                <i class="el-icon-delete"></i>
                            </span>
                        </span>
                    </div>
                </el-upload>
            </div>
            <div class="item">
                <span class="item-title">
                    <span style="color:red">*</span>
                    内容：</span
                >
                <rich-text :content="content" @textChange="textChange"></rich-text>
            </div>
        </div>
        <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="" />
        </el-dialog>
    </div>
</template>

<script>
import richText from './richText.vue';
export default {
    props: {
        isAdd: Boolean,
        bannerId: Number
    },
    data() {
        return {
            title: '',
            dialogVisible: false,
            dialogImageUrl: '',
            disabled: false,
            imgFile: null,

            content: '',
            editorOption: {
                placeholder: ''
            },
            fileList: []
        };
    },
    created() {
        if (!this.isAdd) {
            this.getData();
        }
    },
    components: {
        richText
    },
    methods: {
        onchange(file, fileList) {
            this.fileList = [file];
            this.imgFile = file.raw;
            console.log('🚀 ~ file: editBanner.vue ~ line 123 ~ onchange ~ file, fileList', file, fileList);
        },
        handleRemove(file) {
            this.$refs.elUp.handleRemove(file);
            console.log(file);
            this.fileList = [];
            this.imgFile = null;
        },
        handlePictureCardPreview(file) {
            this.dialogImageUrl = file.url;
            this.dialogVisible = true;
        },
        onEditorChange({ editor, html, text }) {
            this.content = html;
        },
        onExceed(files, fileList) {
            this.$message.error('已存在上传图片，请删除后再上传新的图片');
            console.log('🚀 ~ file: editBanner.vue ~ line 132 ~ onExceed ~ files, fileList', files, fileList);
        },
        finish() {
            let config = {
                headers: {
                    'Content-Type': 'multipart/form-data'
                }
            };
            var formData = new FormData();
            if (!this.title || this.title.length == 0) {
                this.$message.error('请输入标题');
                return;
            }
            if (this.fileList.length == 0) {
                this.$message.error('请上传Banner图片');
                return;
            }
            if (!this.content || this.content.length == 0) {
                this.$message.error('请输入内容');
                return;
            }
            formData.append('title', this.title);
            if (this.fileList.length == 1 && this.imgFile) {
                formData.append('barnnerImg', this.imgFile);
            }
            formData.append('content', this.content);
            if (!this.isAdd) {
                formData.append('id', this.bannerId);
            }
            this.$api
                .articleSave(formData, config)
                .then(res => {
                    this.$emit('save');
                })
                .catch(err => {});
        },
        getData() {
            let self = this;
            self.$api
                .get({
                    url: '/article/findById',
                    data: {
                        id: self.bannerId
                    }
                })
                .then(res => {
                    console.log('🚀 ~ file: editBanner.vue ~ line 156 ~ getData ~ res', res);
                    self.title = res.data.title || '';
                    self.content = res.data.content || '';
                    if (res.data.bannerFile) {
                        self.fileList = [
                            {
                                name: res.data.bannerFile.name,
                                url: 'https://uhome.haier.net/acecology/hsadmin/static/' + res.data.bannerFile.path
                            }
                        ];
                    }
                })
                .catch(err => {});
        },
        back() {
            this.$emit('back');
        },
        textChange(e) {
            this.content = e;
        },
        handleClick() {}
    }
};
</script>

<style scoped lang="scss">
.container {
    display: flex;
    flex-direction: column;
    .btns {
        display: flex;
        justify-content: space-between;
    }
    .edit_content {
        display: flex;
        flex-direction: column;
        .item {
            margin-right: 10px;
            // max-width: 500px;
            display: flex;
            // align-items: center;
            margin-top: 20px;
        }
        .desc {
            margin-top: 4px;
            padding-left: 120px;
            font-size: 12px;
            color: cornflowerblue;
        }
        .item-title {
            min-width: 120px;
            text-align: right;
            line-height: 32px;
        }
    }
}
/deep/.elUp {
    display: flex;
    .el-upload--picture-card {
        display: flex;
        width: 80px;
        height: 80px;
        justify-content: center;
        align-items: center;
    }
    .el-upload-list--picture-card .el-upload-list__item {
        width: 80px;
        height: 80px;
    }
}
/deep/.editer {
    .ql-container {
        height: 200px;
    }
}
</style>
